<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<style type="text/css">
body {
	background-image: url(../images/fundoIndexSite.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.ui-widget {
	font-size: 9px !important;
}

.componente {
	left: 10%;
	position: absolute;
	top: 50%;
}

.componente2 {
	left: 55%;
	position: absolute;
	top: 45%;
}

.componente3 {
	left: 65%;
	position: absolute;
	top: 34%;
}

.componente4 {
	left: 65%;
	position: absolute;
	top: 76%;
}

.componente5 {
	left: 80%;
	position: absolute;
	top: 8%;
}

.componente6 {
	left: 54%;
	position: absolute;
	top: 33%;
	border: 1% solid black;
	border-radius: 10%;
}

.componente7 {
	left: 60%;
	position: absolute;
	top: 39%;
}

.centro {
	width: 76%;
	position: absolute;
	top: 34%;
}
</style>
</h:head>
<title>Negocie JÁ!</title>
<h:body styleClass="body">
	
	<p:growl id="growl" life="5000" />
	<f:view>
		<h:form id="formUsu" prependId="false" acceptcharset="ISO-8859-1"
			lang="pt">

			<h:panelGrid columns="2">

				<h:panelGrid styleClass="componente">

					<h:panelGrid>
						<h:outputText value="Encontre anúncios da sua cidade: "
							style="font-size:12px;font-weight:bold;color:white" />
					</h:panelGrid>

					<br />

					<h:panelGrid columns="2">

						<h:outputText value="Estado: " style="font-size:12px;color:white" />
						<p:selectOneMenu value="#{backingIndex.estadoSelecionado}">
							<f:selectItem itemDisabled="true" itemLabel="Selecione" />
							<f:selectItems value="#{backingIndex.listaEstado}" var="e"
								itemLabel="#{e.descricao} - #{e.sigla}" itemValue="#{e.id}" />
							<p:ajax listener="#{backingIndex.criaListaCidade}"
								update="cidade" process="@this" />
						</p:selectOneMenu>

						<h:outputText value="Cidade: " style="font-size:12px;color:white" />
						<p:selectOneMenu id="cidade"
							value="#{backingIndex.cidadeSelecionada}">
							<f:selectItem itemDisabled="true" itemLabel="Selecione" />
							<f:selectItems value="#{backingIndex.listaCidade}" var="c"
								itemLabel="#{c.nome}" itemValue="#{c.id}" />
						</p:selectOneMenu>
						<br />
					</h:panelGrid>

					<h:panelGrid>
						<p:commandButton value="Visualizar" icon="ui-icon-search"
							style="font-size:12px;height:30px;width:120" />

					</h:panelGrid>

				</h:panelGrid>

				<h:panelGrid styleClass="componente5">
					<p:commandButton value="Minha Conta" icon="ui-icon-key"
						style="font-size:12px;height:30px;width:100" />
				</h:panelGrid>

				<p:panel styleClass="componente6" style="width:450;height:350" />

				<h:panelGrid styleClass="componente3">
					<h3>Cadastre-se JÁ!</h3>
				</h:panelGrid>

				<h:panelGrid columns="2" styleClass="componente7">

					<h:outputText value="Anunciar como?" style="font-size:12px" />
					<h:selectOneRadio style="font-size:12px"
						value="#{indexBacking.tipoCadastro}">

						<p:ajax listener="#{indexBacking.selecionaTipoCadastro}"
							update="panelDados" />

						<f:selectItem itemLabel="Empresa" itemValue="true" />
						<f:selectItem itemLabel="Particular" itemValue="false" />

					</h:selectOneRadio>

				</h:panelGrid>

				<h:panelGrid id="panelDados" columns="2" styleClass="componente2">

					<h:outputText value="Nome (*): " style="font-size:12px" />
					<p:inputText size="60" required="true"
						value="#{indexBacking.cadSalvar.nome}"
						requiredMessage="Informe seu nome!">
					</p:inputText>
					<h:outputText value="E-mail (*): " style="font-size:12px" />
					<p:inputText size="60" required="true" id="txtEmail"
						validatorMessage="O e-mail informado não é válido!"
						value="#{indexBacking.emailDigitado}"
						requiredMessage="Informe um e-mail válido!">
						<f:validateRegex
							pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
						<p:ajax listener="#{indexBacking.verificaEmail}" event="blur"
							update=":growl,txtEmail" />
					</p:inputText>

					<h:outputText value="#{indexBacking.txtCPF_CNPFJ}"
						style="font-size:12px" id="txtCpf" />
					<p:inputMask mask="#{indexBacking.mascara}" id="inputCpf" size="30"
						required="true" requiredMessage="CPF Inválido"
						value="#{indexBacking.cpf_cnpjDigitado}">
						<p:ajax listener="#{indexBacking.verificaCpfCnpj}" event="blur"
							update=":growl,inputCpf" />
					</p:inputMask>

					<h:outputText value="Telefone: " style="font-size:12px" />
					<p:inputMask mask="(99) 9999-9999" size="30" id="txtFone"
						value="#{indexBacking.foneSalvar.numero}" />

					<h:outputText value="Data de Nascimento (*): " id="txtDataNasc"
						style="font-size:12px" rendered="#{indexBacking.txtDataNasc}" />

					<p:inputMask mask="99/99/9999" size="30" id="inputDataNasc"
						rendered="#{indexBacking.inputDataNasc}"
						value="#{indexBacking.cadSalvar.dataNascimento}" />

					<h:outputText value="Senha (*): " style="font-size:12px" />
					<p:password size="30" required="true" id="txtSenha"
						validatorMessage="Informe uma senha com no mínimo 6 dígitos"
						requiredMessage="Informe uma senha!" feedback="true"
						weakLabel="Fraca" strongLabel="Forte" goodLabel="Média"
						value="#{indexBacking.senha}">
						<f:validateLength minimum="6" />
					</p:password>
					<h:outputText value="Confirmação de Senha (*): "
						style="font-size:12px" />
					<p:password size="30" required="true"
						value="#{indexBacking.senhaConfirmada}"
						requiredMessage="Confirme sua senha!" />

				</h:panelGrid>

				<p:watermark value="Mínimo 6 caracteres" for="txtSenha" />
				<p:watermark value="Fone de contato para negociar" for="txtFone" />

				<h:panelGrid styleClass="componente4">

					<p:commandButton value="Cadastrar Agora!" icon="ui-icon-check"
						style="font-size:12px;height:30px;width:160"
						update=":growl,panelDados"
						actionListener="#{indexBacking.efetivaCadastro}" ajax="false" />
				</h:panelGrid>

			</h:panelGrid>

		</h:form>
	</f:view>
</h:body>
</html>